import React, { Component } from "react";

// 引入styled-components，作用是让我们在js里面写css样式
import styled from "styled-components";

// 定义一个组件
// 点后面的是标签名称
const Title = styled.p`
  color: red;
  font-size: 60px;
`;

const H1 = styled.h1`
  color: green;
  font-size: ${(props) => props.size + "px"};
`;

class App extends Component {
  state = {};
  render() {
    return (
      <>
        <h2>css-in-js</h2>
        <Title>hello react!</Title>
        <H1 size="50">haha</H1>
        <H1 size="80">haha2</H1>
      </>
    );
  }
}

export default App;
